<template>
<view class="box">
  <view class="header">
  <view class="left"><view class="user-img" :style="`--url:url(${userInfo.user_img})`" ></view></view>
  <view class="right">
    <view class="text-box">
    <view class="num">{{ userInfo.follow_num }}</view>
    <view class="text">关注</view>
  </view>
  <view class="text-box">
    <view class="num">{{ userInfo.fans }}</view>
    <view class="text">粉丝</view>
  </view>
  <view class="text-box">
    <view class="num">{{ userInfo.like }}</view>
    <view class="text">收到点赞</view>
  </view>
</view>
</view>
<view class="user-info">
  <view class="user-name">{{ userInfo.nickname }}</view>
  <view class="signature">{{ userInfo.signature }}</view>

</view>
</view>
<Invitation v-if="loading"  :invitation-data="invitationData"
 @click-like="clickLike" @get-invitation-id="openComment"
 @get-detail="getDetail" @get-follower="getFollower"
 :DeleteInvitation="DeleteInvitation"
 ></Invitation>

 <uni-load-more v-if="!loading"  :status="loading ? '' :'loading' " />


<uni-popup

  ref="popup"
  type="bottom"
>
<view class="popups">

  <invitationComments ref="commentRef" :invitation_id="invitaionId" :comment_num="comment_num"  @get-replyid="getReplyId"></invitationComments>
<Input :move="false" :placeholder="placeholder" :focus="focus" @get-focus="lowsefocus" @get-msg="sendMsg"></Input>
</view>
</uni-popup>

</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {http} from '@/utlis/http.ts'
import Invitation from '@/components/invitation.vue';
const Prop = defineProps(['user_id'])

const userInfo =ref(
  {
    user_img:'',
    nickname:'',
    like:0,
    follow_num:0,
    fans:0,
    signature:'的撒'
  }
)
uni.request({
  url: 'user/invitation/info/',
  data: {user_id:Prop.user_id},
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    if(data.code == 200){
      userInfo.value=data.data
    }
    else{
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
    
  },
  fail: (error) => {}
})

import invitationComments from '@/components/invitationComments.vue';
import Input from '@/components/inputcomment.vue'

const commentRef = ref(null)
const focus = ref(false)
const placeholder = ref('')
const ftext = ref(false)
const DeleteInvitation = (index)=>{
  invitationData.value.splice(index,1)
}
const lowsefocus = ()=>{
  if(placeholder.value == '')ftext.value=false;
  else ftext.value=true;
  focus.value=false
  placeholder.value=''
}
//改变关注
const getFollower =(index)=>{
  invitationData.value[index].is_follow=!invitationData.value[index].is_follow
}
//获取parent_id
const replyId = ref('')
const replyIndex = ref('')
const getReplyId = (id,nickname,index)=>{
replyId.value = id
focus.value=true
replyIndex.value = index
placeholder.value=nickname
console.log(id,nickname);

}
//发送消息
const sendMsg = (data)=>{
  console.log(data);
  uni.request({
    url: 'invitation/create/comment/',
    data: {
      invitation_id:invitaionId.value,
      comment:data.comment,
      url:data.url?data.url.split('https://www.damer.asia/')[1]:'',
      parent_id:ftext.value ? replyId.value:""
    },
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    sslVerify: true,
    success: ({ data, statusCode, header }) => {
      console.log(data);
      if(data.code == 200){
          const temp=ftext.value ? replyIndex.value:-1
          console.log(temp);
          commentRef.value.addComment(data.data,temp)
      }
      else{
        uni.showToast({
          title: data.errmsg,
          icon: 'error',
          mask: true
        })
      }
      
    },
    fail: (error) => {}
    
  })
  focus.value=false
}
const loading = ref(false)
console.log('pp');
const getDetail=(index)=>{
  console.log(index);
  
  uni.navigateTo({ url: `/pages/invitation/invitation?invitation_id=${invitationData.value[index].id}` })
}
const onscrolltolower = (event)=>{
console.log('okpp',event);

}
//点赞
const clickLike = (index)=>{
invitationData.value[index].like_type=!invitationData.value[index].like_type
uni.request({
  url: 'invitation/like/',
  data: {invitation_id:invitationData.value[index].id},
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    if(data.code == 200){
      invitationData.value[index].like=invitationData.value[index].like_type ?invitationData.value[index].like+1:invitationData.value[index].like-1
    }
    else{
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
    
  },
  fail: (error) => {}
})
}

const page_data=ref({
  page_num:1,
  page_size:10,
  page_count:0
})

//弹出层评论部分
const invitaionId =ref()
const comment_num = ref(0)
const openComment=(id,num)=>{
  invitaionId.value = id
  comment_num.value = num
  popup.value.open()
  console.log(id);
 
  
}
const popup = ref('')
const intailization = ()=>{

uni.request({
  url: 'invitation/recommend/follow/',
  data: {
page_num:page_data.value.page_num,
page_size:page_data.value.page_size,
user_id:""
  },
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    // console.log(data);
    if(data.code == 200){
      invitationData.value = data.data.list
      page_data.value.page_count = data.count
      loading.value = true
    }
    else{
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
    
  },
  fail: (error) => {}
})



}
intailization()


const invitationData = ref([
     {
       id:1,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:3,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
     {
       id:2,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         }
       ],
       comment_num:100,
       like_type:false,
       is_follow:true,
       like:99,
     },
     {
       id:3,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:3,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:4,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:5,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:6,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
     {
       id:4,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:3,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:4,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:5,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:6,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:7,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:8,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:9,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
     {id:5,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
      
        
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
     {id:5,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:3,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:4,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
      
        
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
   ])</script>

<style lang="scss" scoped>
.box{
  margin: 0 30.769rpx;
  .header{
    padding-top: 76.923rpx;
    margin-bottom: 30.769rpx;
    display: flex;
    align-items: center;
    .left{
      .user-img{
        --url:url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
        width: 161.538rpx;
        height: 161.538rpx;
        border-radius: 50%;
        background-image: var(--url);
        background-position: center;
        background-size: cover;
      }
    }
    .right{
      flex-grow: 1;
      margin-left: 78.846rpx;
      margin-right: 28.462rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text-box{
        .num{
          height: 34.615rpx;
          margin: 0 auto 15.385rpx;
          color: rgba(51,51,51,1);
          font-size: 34.615rpx;
          font-weight: 550;
          text-align: center;
          line-height:34.615rpx ;

        }
        .text{
          margin: 0 auto;
          color: rgba(51,51,51,.6);
          font-size: 23.077rpx;
          text-align: center;
        }
      }
    }
  }
  .user-info{
    .user-name{
      margin-bottom: 15.231rpx;

      color: rgba(51,51,51,1);
      font-size: 34.615rpx;
      font-weight: 550;
    }
    .signature{
      color: rgba(51,51,51,.6);
          font-size: 23.077rpx;
    }
    .bottom{

    }
  }

}
.popups{
  width:100%;
  padding:10rpx 0 100px;
  height: 1000rpx;
  border-radius: 46rpx 46rpx 0 0;
  background-color: #fff;
}

</style>